<template>
    <div class="admin-container">
        <!-- 宇宙背景 -->
        <div class="cosmic-bg">
            <div class="star-layer"></div>
            <div class="energy-flow"></div>
        </div>

        <!-- 主内容区 -->
        <div class="admin-main">
            <!-- 左侧信息列 -->
            <div class="admin-info-panel">
                <div class="admin-profile hologram-effect">
                    <div class="admin-avatar" style="background: linear-gradient(135deg, #ff47a0, #57a0ff)"></div>
                    <h3 class="admin-name">太空执法者</h3>
                    <p class="admin-title">系统管理员</p>
                    <div class="admin-stats">
                        <div class="stat-card">
                            <span class="stat-icon">🛡️</span>
                            <div>
                                <p class="stat-label">今日处理</p>
                                <p class="stat-value">2次</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <span class="stat-icon">⚡</span>
                            <div>
                                <p class="stat-label">系统状态</p>
                                <p class="stat-value green-glow">稳定</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧功能区容器 -->
            <div class="function-container">
                <!-- 功能切换 -->
                <div class="function-switch">
                    <button 
                        class="switch-btn" 
                        :class="{ active: currentFunction === 'search' }"
                        @click="switchFunction('search')"
                    >
                        <span class="btn-icon">🔍</span>
                        量子审查
                    </button>
                    <button
                        class="switch-btn"
                        :class="{ active: currentFunction === 'announce' }"
                        @click="switchFunction('announce')"
                    >
                        <span class="btn-icon">📢</span>
                        星域广播
                    </button>
                    <button
                        class="switch-btn"
                        :class="{ active: currentFunction === 'forum' }"
                        @click="switchFunction('forum')"
                    >
                        <span class="btn-icon">🗣️</span>
                        论坛
                    </button>
                </div>

                <!-- 功能内容区 -->
                <div class="function-content-wrapper">
                    <!-- 查询删除功能 -->
                    <div v-show="currentFunction === 'search'" class="function-content">
                        <div class="search-module hologram-effect">
                            <div class="quantum-search">
                                <input 
                                    type="text" 
                                    placeholder="输入量子指纹..."
                                    class="search-input"
                                >
                                <button class="search-btn">
                                    <span class="search-icon">🚀</span>
                                    超维搜索
                                </button>
                            </div>
                            
                            <div class="post-list">
                                <div class="post-item">
                                    <div class="post-header">
                                        <span class="post-id">#TX-284</span>
                                        <span class="post-status danger">违规标记</span>
                                    </div>
                                    <p class="post-content">检测到非法曲速引擎交易信息...</p>
                                    <div class="post-actions">
                                        <button class="action-btn delete">量子删除</button>
                                        <button class="action-btn detail">维度追踪</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 公告发布功能 -->
                    <div v-show="currentFunction === 'announce'" class="function-content">
                        <div class="announce-module hologram-effect">
                            <h3 class="module-title">全星系广播系统</h3>
                            <textarea
                                class="announce-input"
                                placeholder="输入广播内容（最大500量子字节）"
                            ></textarea>
                            <div class="announce-controls">
                                <button class="broadcast-btn emergency">
                                    <span class="btn-icon">⚠️</span>
                                    紧急广播
                                </button>
                                <button class="broadcast-btn normal">
                                    <span class="btn-icon">📡</span>
                                    常规发布
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 论坛功能 -->
                    <div v-show="currentFunction === 'forum'" class="function-content">
                        <div class="forum-module hologram-effect">
                            <div class="forum-post" v-for="(post, index) in forumPosts" :key="index">
                                <h3 class="post-title">{{ post.title }}</h3>
                                <p class="post-time">{{ post.time }}</p>
                                <p class="post-content">{{ post.content }}</p>
                                <button class="delete-post-btn" @click="deletePost(index)">删除</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentFunction: 'search', // search | announce | forum
            forumPosts: [
                {
                    title: '关于曲速引擎的讨论',
                    time: '2025-04-12 10:00',
                    content: '曲速引擎在超空间航行中的效率如何提高？'
                },
                {
                    title: '星系间贸易问题',
                    time: '2025-04-11 14:30',
                    content: '如何解决星系间贸易的货币兑换问题？'
                }
            ]
        };
    },
    methods: {
        switchFunction(func) {
            this.currentFunction = func;
        },
        deletePost(index) {
            this.forumPosts.splice(index, 1);
        }
    }
};
</script>

<style scoped>
/* 基础布局 */
.admin-main {
    display: flex;
    gap: 30px;
    max-width: 1400px;
    margin: 50px auto;
    padding: 20px;
    align-items: center; 
}

/* 左侧信息面板 */
.admin-info-panel {
    position: relative;
    z-index: 10;
    flex: 0 0 280px; 
    display: flex;
    justify-content: center;
}

.admin-profile {
    background: rgba(16,22,36,0.95);
    border: 1px solid #ff47a0;
    border-radius: 15px;
    padding: 30px;
    backdrop-filter: blur(15px);
}

.admin-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: 0 0 30px rgba(255,71,160,0.3);
}

.admin-name {
    color: #ff47a0;
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 10px;
    text-shadow: 0 0 15px rgba(255,71,160,0.3);
}

/* 统计卡片 */
.stat-card {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-icon {
    font-size: 2em;
}

.green-glow {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0,255,136,0.3);
}

/* 右侧功能区容器 */
.function-container {
    position: relative;
    flex: 1;
}

/* 功能切换区 */
.function-switch {
    display: flex;
    flex-direction: column; 
    position: absolute;
    right: 0; 
    top: 20%; 
    gap: 15px;
    z-index: 1; /* 设置较高的堆叠顺序，确保按钮不被覆盖 */
}

.switch-btn {
    background: rgba(87,160,255,0.1);
    border: 1px solid #57a0ff;
    border-radius: 25px;
    padding: 12px 25px;
    color: #57a0ff;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px; 
}

.switch-btn.active {
    background: linear-gradient(135deg, #57a0ff, #00ff88);
    color: white;
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(87,160,255,0.3);
}

/* 功能内容区包裹层 */
.function-content-wrapper {
    border: 1px solid rgba(87,160,255,0.2);
    border-radius: 15px;
    background: rgba(16,22,36,0.9);
    backdrop-filter: blur(10px);
    min-height: 600px;
    padding: 25px;
    margin-right: 200px; /* 进一步增大水平距离，可按需调整 */
}

/* 功能内容区 */
.function-content {
    min-height: 600px;
}

/* 搜索模块 */
.quantum-search {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.search-input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid #57a0ff;
    border-radius: 25px;
    padding: 12px 25px;
    color: white;
}

.search-btn {
    background: linear-gradient(135deg, #57a0ff, #00ff88);
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    color: white;
    cursor: pointer;
}

/* 公告模块 */
.announce-input {
    width: 100%;
    height: 400px;
    background: rgba(255,255,255,0.05);
    border: 1px solid #ff47a0;
    border-radius: 15px;
    padding: 20px;
    color: white;
    margin: 20px 0;
}

.broadcast-btn {
    border-radius: 25px;
    padding: 15px 40px;
    border: none;
    cursor: pointer;
}

.emergency {
    background: linear-gradient(135deg, #ff4747, #ff47a0);
    color: white;
}

.normal {
    background: linear-gradient(135deg, #57a0ff, #00ff88);
    color: white;
}

/* 论坛模块 */
.forum-module {
    color: white;
}

.forum-post {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.post-title {
    font-size: 1.2em;
    margin-bottom: 5px;
}

.post-time {
    font-size: 0.9em;
    color: #ccc;
    margin-bottom: 10px;
}

.post-content {
    margin-bottom: 15px;
}

.delete-post-btn {
    background: #ff4747;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .admin-main {
        flex-direction: column;
        padding: 15px;
    }
    
    .admin-info-panel {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .function-content-wrapper {
        min-height: auto;
        margin-right: 0;
    }

    .function-switch {
        position: static;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 15px;
    }
}

/* 背景星空效果 */
.cosmic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: -1;
}

.star-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: stars 100s linear infinite;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px #fff;
}

@keyframes stars {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-1000px, -1000px, 0);
    }
}

.energy-flow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0) 70%);
    animation: energy 30s linear infinite;
}

@keyframes energy {
    0% {
        transform: scale(1);
        opacity: 0.2;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 0.2;
    }
}
</style>
    